<template>
  <a-modal :width="1000" v-model:visible="showDialog" title="工序模板管理" top="8vh" title-align="start" :footer="false" :mask-closable="false" @cancel="closedDialog">
    <a-button type="primary" @click="openAdd()" style="margin-bottom: 10px">新增工序模板</a-button>
    <a-table
      class="table-normal-line s"
      ref="tableRef"
      row-key="key"
      :data="list"
      :scroll="{
        y: 'calc(84vh - 180px)',
      }"
      size="mini"
      :bordered="false"
      :pagination="false"
    >
      <template #columns>
        <a-table-column title="模板名称" data-index="templateName" :width="240" />
        <a-table-column title="生产工序" :width="240">
          <template #cell="{ record }">
            <p>{{ showprocedureLine(record) }}</p>
          </template>
        </a-table-column>
        <a-table-column title="操作" :width="100">
          <template #cell="{ record }">
            <a-space>
              <a-button type="text" size="mini" @click="openEdit(record)">编辑</a-button>
              <a-popconfirm content="确认删除？" @ok="deleteTemplate(record)" type="warning">
                <a-button type="text" size="mini">删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </a-modal>
  <a-modal :width="1000" v-model:visible="showEditDialog" title="新增工序模板" top="8vh" title-align="start" :mask-closable="false" :ok-loading="submitLoading" :on-before-ok="submitAdd">
    <div class="flex">
      <p class="label">
        <span class="warningColor">*</span>
        <span>模板名称：</span>
      </p>
      <a-input v-model="editInfo.templateName" style="width: 400px" />
    </div>
    <div class="flex" style="margin-top: 20px">
      <p class="label">
        <span class="warningColor">*</span>
        <span>工序路线：</span>
      </p>
      <div class="line-w">
        <a-space>
          <a-tag v-for="(tag, i) of editInfo.procedureLine" :key="tag" :closable="true" @close="handleRemove(i)">
            {{ tag }}
          </a-tag>
          <a-popover position="bottom" trigger="click" v-model:popup-visible="showPopover" @popup-visible-change="addTagName = ''">
            <a-button size="mini" type="outline">+添加工序</a-button>
            <template #content>
              <a-input v-model.trim="addTagName" placeholder="工序名称" style="width: 240px; margin-bottom: 20px" />
              <div class="flex-c-end">
                <a-button size="mini" class="gray-outline" @click="showPopover = false">取消</a-button>
                <a-button type="primary" size="mini" style="margin-left: 5px" @click="addTag">保存</a-button>
              </div>
            </template>
          </a-popover>
        </a-space>
        <ul class="line-con flex flex-wrap">
          <li class="start"></li>
          <li class="tag-item" v-for="(tag, i) of editInfo.procedureLine" :key="tag">
            <a-tag :closable="true" @close="handleRemove(i)">
              {{ tag }}
            </a-tag>
          </li>
        </ul>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { createProductionProcedure, updateProductionProcedure, deleteProductionProcedure } from '@/api/purchaseApplication'
  import { Message } from '@arco-design/web-vue'
  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
  })
  console.log(props.list)
  const showDialog = ref(props.isShow)
  const showEditDialog = ref(false)
  const showPopover = ref(false)
  const submitLoading = ref(false)
  const addTagName = ref()
  const editInfo = ref<any>({
    procedureLine: [],
  })
  const editType = ref('add')

  // 关闭
  function closedDialog() {
    showDialog.value = false
    emit('closed')
  }
  function openAdd() {
    editInfo.value = {
      procedureLine: [],
    }
    editType.value = 'add'
    showEditDialog.value = true
  }
  function openEdit(row: any) {
    editInfo.value = {
      templateName: row.templateName,
      procedureLine: row.procedureLine.split(','),
      id: row.id,
    }
    editType.value = 'edit'
    showEditDialog.value = true
  }
  // 删除模板
  async function deleteTemplate(row: any) {
    const res: any = await deleteProductionProcedure({
      ids: [row.id],
    })
    if (res) {
      Message.success('删除成功')
      emit('success')
    }
  }
  // 删除工艺
  function handleRemove(index: number) {
    editInfo.value.procedureLine.splice(index, 1)
  }
  // 添加工序
  function addTag() {
    if (addTagName.value) {
      editInfo.value.procedureLine.push(addTagName.value)
      showPopover.value = false
    }
  }
  function showprocedureLine(row: any) {
    return row.procedureLine.replaceAll(',', ' —》')
  }
  // 创建模板
  async function submitAdd() {
    if (!editInfo.value.templateName) {
      Message.error('请输入模板名称')
      return false
    }
    if (!editInfo.value.procedureLine?.length) {
      Message.error('请添加工序路线')
      return false
    }
    let _params: any = {
      templateName: editInfo.value.templateName,
      procedureLine: editInfo.value.procedureLine?.join(','),
    }
    let res: any
    if (editType.value == 'add') {
      res = await createProductionProcedure(_params)
    } else {
      _params.id = editInfo.value.id
      res = await updateProductionProcedure(_params)
    }
    if (!res) return false
    Message.success('保存成功')
    emit('success')
    showEditDialog.value = false
  }
</script>

<style lang="less" scoped>
  .label {
    width: 100px;
    text-align: right;
  }
  .line-w {
    flex: 1;
  }
  .line-con {
    margin-top: 10px;
    border: 1px solid #ddd;
    padding: 10px;
    width: 100%;
    height: 300px;
    .start {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 2px solid #ddd;
    }
    .tag-item {
      padding-left: 60px;
      position: relative;
      height: 30px;
      .arco-tag {
        margin-top: 2px;
      }
      &::before {
        content: '';
        background-color: rgb(var(--primary-5));
        width: 58px;
        height: 2px;
        position: absolute;
        left: 0;
        top: 13px;
      }
      &::after {
        content: '';
        width: 0;
        height: 0;
        border: 8px solid transparent;
        border-left: 8px solid rgb(var(--primary-5));
        position: absolute;
        left: 52px;
        top: 6px;
      }
    }
  }
</style>
